<template>
    <el-main>
        <el-row class="mev-div-border" style="position: absolute;height: 270px;">
            <el-row v-for="rowIndex in rowGenerator(modules, 2)" :key="rowIndex">
                <el-col :span="8" style="width: 90px" v-for="colIndex in colArrayGenerator(modules, 2, rowIndex - 1)" :key="colIndex">
                    <el-main style="width: 100%" v-if="modules[colIndex].functions === null || modules[colIndex].functions.length === 0">
                        <el-image style="height: 40px" fit="contain" :src="require('@/assets/' + modules[colIndex].imgSrc)"></el-image>
                        <span>{{ modules[colIndex].name }}</span>
                    </el-main>
                    <el-main
                        v-else-if="modules[colIndex].functions !== null && modules[colIndex].functions.length === 1"
                        @click.native="routeToComponent(modules[colIndex].functions[0].component.name)"
                    >
                        <el-image style="height: 40px" fit="contain" :src="require('@/assets/' + modules[colIndex].imgSrc)"></el-image>
                        <span>{{ modules[colIndex].name }}</span>
                    </el-main>
                    <el-popover v-else placement="bottom" width="205" trigger="click" v-model="visable">
                        <el-main v-if="modules[colIndex].functions">
                            <el-row v-for="innerRowIndex in rowGenerator(modules[colIndex].functions, 3)" :key="innerRowIndex">
                                <el-col
                                    :span="8"
                                    v-for="innerColIndex in colArrayGenerator(modules[colIndex].functions, 3, innerRowIndex - 1)"
                                    :key="innerColIndex"
                                    @click.native="routeToComponent(modules[colIndex].functions[innerColIndex].component.name)"
                                >
                                    <el-image style="height: 40px" fit="contain" :src="require('@/assets/' + modules[colIndex].functions[innerColIndex].imgSrc)"></el-image>
                                    <span>{{ modules[colIndex].functions[innerColIndex].name }}</span>
                                </el-col>
                            </el-row>
                        </el-main>
                        <el-main slot="reference">
                            <el-image style="height: 40px" fit="contain" :src="require('@/assets/' + modules[colIndex].imgSrc)"></el-image>
                            <span>{{ modules[colIndex].name }}</span>
                        </el-main>
                    </el-popover>
                </el-col>
            </el-row>
        </el-row>
    </el-main>
</template>

<script>
import Objects from "../../plugins/utils/objects";
import Log from "../../plugins/utils/log";
import Mev from "../../plugins/mev/mev";
/*import Environment from "../../plugins/utils/environment";*/
import retrieval from "../../plugins/mev/menubar/menubar.js";

/*let retrievalSubstance_array = [];*/
export default {
    name: "Menubar",
    data() {
        return {
            input: {
                text: ""
            },
            modules: Mev.Modules,
            visable: true
        };
    },
    methods: {
        routeToComponent: function(componentName) {
            let that = this;
            if (Objects.isEmpty(componentName)) {
                Log.info("尚未实现");
                return;
            }

            if (this.$route.name !== componentName) {
                that.visable = false;

                document.getElementById("leftSide").style.display = "none";
                this.$router.push({ name: componentName });
            }
        },

        rowGenerator: function(array, elementsOneLine) {
            return array.length % elementsOneLine === 0 ? array.length / elementsOneLine : Math.ceil(array.length / elementsOneLine) + 1;
        },

        colArrayGenerator: function(array, elementsOneLine, rowIndex) {
            let res = [];

            if (rowIndex * elementsOneLine >= array.length) {
                return res;
            }

            for (let idx = rowIndex * elementsOneLine; idx < Math.min((rowIndex + 1) * elementsOneLine, array.length); idx++) {
                res.push(idx);
            }

            return res;
        }
    }
};
</script>

<style scoped>
.el-main {
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-size: 20px;
}

.el-row {
    margin: 8px 0;
}

.el-col {
    padding: 4px;
}

.el-link {
    font-size: 12px;
}
</style>
